<template>
  <!-- 封装弹框 -->
  <div class="popup" >
    <el-dialog
      :visible.sync="dialogVisible"
      :width="popupWidth"
      :before-close="handleClose"
      :show-close="false"
      :destroy-on-close="true"
      @open="open()"
    >
      <div style="height:80%;background-color: #061F33; font-size:16px;color:#fff;font-family:PingFangSC-Medium;">
        <el-form :model="form" label-width="auto" :rules="rules" ref="addform" label-position="left" style="display:flex;flex-direction:row;justify-content: space-between;" >
        <div style="width:45%;height:95%">
          <!-- <el-form-item label="发生时间" class="itemleft" prop="time">
             <span slot="label">
              <span style="color:#fff"> 发生时间</span>
              </span>
                    <el-date-picker
                    popper-class="datePicker"
                    v-model="form.time"
                    type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="任意时间点">
                  </el-date-picker>
          </el-form-item> -->
          <el-form-item label="发生时间" class="itemleft" prop="time">
            <span slot="label">
              <span style="color:#fff"> 发生时间</span>
              </span>
              <el-input 
                v-model="form.time" :disabled="true">
              </el-input>
          </el-form-item>
          <el-form-item label="发生系统" class="itemleft" prop="faultSystem">
            <span slot="label">
              <span style="color:#fff"> 发生系统</span>
              </span>
              <div class="block" >
                <el-cascader
                  v-model="form.faultSystem"
                  ref="ystemoptions"
                  :options="optionsSystem"
                  popper-class="pc-sel-area-cascader"
                  expandTrigger="hover"
                  :props="props"
                  collapse-tags
                  style="width:100%"
                  placeholder="请选择系统"
                  @change="changeSystem"
                  clearable></el-cascader>
              </div>
            <!-- <el-select v-model="form.SelectValue" :popper-append-to-body="false"    placeholder="请选择" style="width:100%">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
          </el-form-item>
          <!-- <el-form-item label="故障级别" class="itemleft">
            <span slot="label">
              <span style="color:#fff"> 发生级别</span>
              </span>
            <el-select v-model="form.fauleveValue" :popper-append-to-body="false"  placeholder="请选择级别" style="width:100%">
              <el-option
                v-for="item in fauleveoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="是否解决" class="itemleft" prop="whetherSolve">
            <span slot="label">
              <span style="color:#fff"> 是否解决</span>
              </span>
            <el-select v-model="form.whetherSolve" :popper-append-to-body="false"  placeholder="请选择是否" style="width:100%">
              <el-option
                v-for="item in isDealoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理人" class="itemleft" prop="handingPerson">
            <span slot="label">
              <span style="color:#fff"> 处理人</span>
              </span>
              <el-input placeholder="请输入姓名"
                v-model="form.handingPerson" clearable>
              </el-input>
            <!-- <el-select v-model="form.SelectValue" :popper-append-to-body="false"  placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="处理日期" class="itemleft" prop="handingTime">
            <span slot="label">
              <span style="color:#fff"> 处理日期</span>
              </span>
            <div class="block">
              <el-date-picker
                popper-class="datePicker"
                v-model="form.handingTime"
                style="width:100%"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="更换部件" class="itemleft" prop="faultPosition">
            <span slot="label">
              <span style="color:#fff"> 更换部件</span>
              </span>
              <div class="block" >
                <el-cascader
                  v-model="form.faultPosition"
                  ref="componeCascader"
                  :options="optionsCompone"
                  popper-class="pc-sel-area-cascader"
                  expand-trigger="hover"
                  :props="props"
                  collapse-tags
                  style="width:100%"
                  placeholder="请选择部件"
                  @change="changeCompone"
                  clearable></el-cascader>
              </div>
          </el-form-item>
         </div> 
         <div style="width:50%;height:95%">
            <el-form-item label="故障分析" class="itemright" prop="faultAnalysis">
              <span slot="label">
              <span style="color:#fff"> 故障分析</span>
              </span>
              <el-input  type="textarea" v-model="form.faultAnalysis" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="故障原因" class="itemright" prop="faultCause">
            <span slot="label">
              <span style="color:#fff"> 故障原因</span>
              </span>
            <el-input  type="textarea" v-model="form.faultCause" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="处理方法" class="itemright" prop="handingMethod">
            <span slot="label">
              <span style="color:#fff"> 处理方法</span>
              </span>
            <el-input  type="textarea" v-model="form.handingMethod" :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="处理建议" class="itemright" prop="handlingSuggestion">
            <span slot="label">
              <span style="color:#fff"> 处理建议</span>
              </span>
            <el-input  type="textarea" v-model="form.handlingSuggestion" :rows="4"></el-input>
          </el-form-item>
         </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="Save()">保 存</el-button>
        <el-button type="primary" @click="Cancel()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import object from 'element-resize-detector/src/detection-strategy/object';
import {getmodifyFault} from '../../api/failureanalysis.js'
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  data() {
    return {
      props: { multiple: true },
      rules: {
        time: [
            { required: true, message: '请选择发生时间', trigger: 'blur' },
          ],
        faultSystem:[
          { required: true, message: '请至少选择一个系统', trigger: 'blur' },
        ],
        whetherSolve:[
          { required: true, message: '请至少选择一项', trigger: 'blur' },
        ],
        handingPerson:[
          { required: true, message: '请至少填写一人', trigger: 'blur' },
        ],
        handingTime:[
          { required: true, message: '请选择处理日期', trigger: 'blur' },
        ],
        faultPosition:[
          { required: true, message: '请至少选择一个部件', trigger: 'blur' },
        ],
        faultAnalysis:[
          { required: true, message: '不能为空', trigger: 'blur' },
        ],
        faultCause:{ required: true, message: '不能为空', trigger: 'blur' },
        handingMethod:{ required: true, message: '不能为空', trigger: 'blur' },
        handlingSuggestion:{ required: true, message: '不能为空', trigger: 'blur' },
      },
        value1:'',
          isIndeterminate: true,
      form: {
              eventId:'',
              time:'',
              faultSystem: '',
              whetherSolve:'',
              handingPerson:'',
              handingTime:'',
              faultPosition:'',
              faultAnalysis:'',
              faultCause:'',
              handingMethod:'',
              handlingSuggestion:'',
            },
            optionsCompone: [{
                  value: '1',
                  label: '阀TCE'
                }, {
                  value: '2',
                  label: '阀阻尼电容'
                }, {
                  value: '3',
                  label: '阀均压电阻'
                }, {
                  value: '4',
                  label: '阀电抗器'
                }, {
                  value: '5',
                  label: '阀光纤'
                },
                {
                  value: '6',
                  label: '电极状态/内冷水质'
                },
                {
                  value: '7',
                  label: '阀控板卡'
                },
                {
                  value: '8',
                  label: '晶闸管'
                }
              ],
          optionsSystem:[
            {
                  value: '1',
                  label: '系统A'
                },
                {
                  value: '2',
                  label: '系统B'
                },
          ],
          fauleveoptions:[
            {
                  value: '1',
                  label: '一般'
                },
                {
                  value: '2',
                  label: '紧急'
                },
          ],
          isDealoptions:[
                {
                  value: 1,
                  label: '是'
                },
                {
                  value: 0,
                  label: '否'
                },
          ]
    }
  },
  props: {
    dialogTitle: {
      type: String,
      default: '标题'
    },
    visible: {
      type: Boolean,
      default: false
    },
    popupWidth: {
      type: String,
      default: '550px'
    },
    modData:{
      type: Object,
      default: () => {
          return {
              eventId:'',
              time:'',
              faultSystem: '',
              whetherSolve:'',
              faultPosition:'',
              faultAnalysis:'',
              faultCause:'',
              handingMethod:'',
          }
      }
      
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('updateVisible', val)
      }
    }
  },
  methods: {
    Cancel () {
      this.$refs.addform.resetFields();
      this.$emit('resetPopupData')
    },
    Save () {
      //确保没有改变系统选项时，发送请求时字符串
      this.form.faultSystem = this.form.faultSystem.toString()
      this.$refs.addform.validate((valid) => {
        console.log(this.form)
          if (valid) {
            getmodifyFault(this.form).then(response => {
              this.$message({
                  type: 'success',
                  message: '修改成功!'
              })
              this.dialogVisible =false
          }).catch(() => {
              this.$message.error({
                  message: '修改失败!'
              })});
          } else {
            alert('不符合填入规则');
            return false;
          }
        });
      this.$emit('submitPopupData')
    },
    handleClose () {
      this.$emit('handleClose')
    },
    handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      changeCompone(value){
        this.form.faultPosition = value.toString()
        console.log(this.$refs.componeCascader.getCheckedNodes())
      },
      changeSystem(value){
        this.form.faultSystem = value.toString()
      },
      //打开回调
      open(){
        this.form.eventId = this.modData.eventId
        this.form.time = this.modData.time
        this.form.faultSystem = this.modData.faultSystem.toString().split(",")
        this.form.whetherSolve = this.modData.whetherSolve
        this.form.faultPosition = this.modData.faultPosition
        this.form.faultAnalysis = this.modData.faultAnalysis
        this.form.faultCause = this.modData.faultCause
        this.form.handingMethod = this.modData.handingMethod
        console.log(this.form.faultPosition)
      }


  },
}
</script>

<style lang="less">
.pc-sel-area-cascader{
  background-color: #061F33;
  width: 12% !important;
  /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
 .popper__arrow,
 .popper__arrow::after {
  display: none;
}
  .el-cascader__dropdown {
  // 选择器面板边框及圆角设置
  border-radius: 12px;
  border: 1px solid #78043e;
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.07);
}
 .el-cascader-node:hover{
    background-color: #0a4E7D;
    width: 200%;
 }
 .el-cascader-node{
    color: #fff;
 }
 .el-cascader-node:focus {
  /*设置选中节点，鼠标移开的样式 */
  background-color: transparent ;
}
  .el-cascader-node__label{
    width: 400px;
  }
}
::v-deep .pc-sel-area-cascader .el-input__inner:hover {
  border-color: #4dbeff
}

.popup {
  .el-dialog {
    z-index: 10000;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(17, 130, 251, 0.5);
    border-radius: 5px;
    margin-top: 10% !important;
  }
  .el-dialog__header {
    width: 100%;
    height: 10%;
    background-color: #061F33;
    // line-height: 38px;
    // border-bottom: 1px solid #f6f7f9;
    // box-sizing: border-box;
    // padding: 0 20px;
    // font-size: 16px;
  }
  .el-dialog__close.el-icon.el-icon-close {
    font-size: 20px;
    width: 17px;
    height: 17px;
  }
  .el-button.el-button--default {
    width: 88px;
    color: #1182fb;
    border: 1px solid #1182fb;
  }
  .el-button.el-button--primary {
    width: 88px;
    margin: 0 0 0 10%;
  }
  .el-dialog__body {
    padding: 1% 2%;
    box-sizing: border-box;
    background-color: #061F33;
  }
  .el-dialog__headerbtn {
    top: 4px;
  }
  .el-dialog__title {
    color: #3c4354;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    line-height: 16px;
  }
  .el-dialog__footer {
    text-align: center;
    background-color: #061F33;
    height: 3%;
  }
  .itemright{
    height: 20%;
  }
  .el-date-editor{
    width: 100%;
  }
  .el-input.is-disabled .el-input__inner{
    background-color:transparent;
    // border-color: transparent;
  }
::v-deep .el-textarea__inner{
  background-color:transparent;
  border-color: #0d4fcf;
  color: #fff;
}
/* // 设置输入框的背景色、字体颜色、边框属性设置； */
::v-deep .el-input__inner {
  background-color:transparent;
  border-color: #0d4fcf;
   color: #fff;
}
::v-deep .el-input__inner:hover{
  border-color: #0d4fcf;
}
::v-deep .el-input__suffix:hover{
  border-color: #0d4fcf;
}
/* 设置下拉框列表的 padding 值为：0；(即：样式调整) */
::v-deep .el-select-dropdown__list{
  padding: 0 0;
}
/* 按钮切角 */
.buttonAng{
  width: 30%;

  clip-path: polygon(

    15% 0, 100% 0,

    100% 70%,

    85% 100%, 0% 100%,

    0 30%);

    background:linear-gradient(325deg,#079DC2 15%, #0a446C 0) bottom right,    
              linear-gradient(145deg,#079DC2 15%, #0a446C 0) top left
             ;

    background-size: 50% 100%;

    background-repeat: no-repeat;

    border: solid 2px #079DC2;
}
::v-deep .el-scrollbar{
  background-color: blue;
}
/* 更改下拉框边收回时框颜色 */
::v-deep .el-select-dropdown {
  border-color: #0d4fcf;
}

/* // 设置下拉框的字体属性及背景颜色； */
.el-select-dropdown__item {
  font-size: 7px;
  line-height: -3%;
  color: #fff;
  font-weight: 200;
  background-color:#052137;

}
// 给部件下来选择框调样式
.el-popper .el-cascader__dropdown{
  width: 24.5%;
}
/* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
::v-deep .el-popper .popper__arrow,
::v-deep .el-popper .popper__arrow::after {
  display: none;
}
/* // 设置鼠标悬停在下拉框列表的悬停色； */
.el-select-dropdown__item.hover {
  background-color: #0a4E7D;
}
}
</style>
